<template>
	<view class="container">

		<!-- Form Section -->
		<view class="form">
			<view class="input-group">
				<image src="/static/user/reg-phone.png" class="icon"></image>
				<input type="text" placeholder="请输入您的注册码" class="input" />
			</view>
			<view class="input-group">
				<image src="/static/user/reg-phone.png" class="icon"></image>
				<input type="password" placeholder="请输入登录密码" class="input" />
			</view>
			<label class="agreement">
				<checkbox-group class="block" @change="CheckboxChange">
					<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false"
						value="A"></checkbox>
				</checkbox-group>
				<text>勾选同意付加加的《用户协议》</text>
			</label>
			
			<button class="submit-button">立即领钱</button>
			<view class="links">
				<text class="forgot-password">忘记密码</text>
				<text class="login-link">去登录</text>
			</view>
		</view>
	</view>
</template>
<script>
	import user from '@/api/user.js';
	import graceChecker from '@/common/graceChecker.js';
	export default {
		data() {
			return {
				checkbox: [{
					value: 'A',
					checked: true
				}],
				agreement: false,
				logo: '',
				userInfo: {
					avatarUrl: '',
					nickName: null,
					gender: 0
				},
				platform: 'h5',
				pageroute: '',
				provider: null,
				timer: null,
				third_id: 0,
				canIUseGetUserProfile: false, // 1.0.7 升级
				password: '',
				inviteCode: '',
				mobile: '',
				code: '',
				login_bg: '',
				status: 'login',
				radio: false,
			};
		},
		onLoad(options) {

			if (options.cid) {
				this.inviteCode = options.cid
				this.$store.commit('setInviteCode', options.cid);
			}
			this.detail();

		},
		methods: {
			send(e) {

				if (!this.mobile) {
					this.toast('请输入手机号')
				}
				// 定义表单规则
				// let rule = [{
				// 		name: 'mobile',
				// 		checkType: 'phoneno',
				// 		checkRule: "1,11",
				// 		errorMsg: '手机号不正确'
				// 	},
				// ];
				// //进行表单检查
				// var formData = e.detail.value;
				// console.log(formData)
				// var checkRes = graceChecker.check(formData, rule);
				// if (checkRes) {

				user.sendsms({
					mobile: this.mobile,
					event: 'register'
				}).then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						console.log(res.data)

					}
					this.toast(res.msg)
				})
				// }
			},
			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			detail() {
				this.inviteCode = this.$store.state.inviteCode;
				// 登录账号
				user.detail().then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						this.logo = res.data.logo;

						this.login_bg = res.data.mobile_login_bg;

					}
				})
			},
			download() {

				window.location.href = 'https://app.yycjkb.cn/fujiajia.apk'

			},
			submit() {
				// 登录账号
				user.login({
					account: this.mobile,
					password: this.password
				}).then(res => {
					uni.hideLoading();
					if (res.code !== 1) {
						return this.toast(res.msg)
					}
					if (res.code === 1) {
						this.$store.commit('setHasLogin', true);
						this.$store.commit('setToken', res.data.userinfo.token);
						this.$store.commit('setUserInfo', res.data.userinfo);
						// uni.navigateBack();
						uni.switchTab({
							url: '/pages/my/index'
						})
					}
				})
			},
			formSubmit(e) {
				//定义表单规则
				let rule = [
					// {
					// 	name: 'nickName',
					// 	checkType: 'string',
					// 	checkRule: "1,20",
					// 	errorMsg: '用户名应该1-10字符之间'
					// },
					{
						name: 'password',
						checkType: 'string',
						checkRule: '6,16',
						errorMsg: '密码至少6位'
					},

					{
						name: 'mobile',
						checkType: 'phoneno',
						checkRule: '1,11',
						errorMsg: '手机号不正确'
					},

					{
						name: 'code',
						checkType: 'string',
						checkRule: '1,4',
						errorMsg: '验证码不正确'
					},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					user.register({
						username: this.mobile,
						password: this.password,
						inviteCode: this.inviteCode,
						mobile: this.mobile,
						code: this.code,
					}).then(res => {
						uni.hideLoading();
						if (res.code !== 1) {
							return this.toast(res.msg)
						}
						if (res.code === 1) {
							this.$store.commit('setHasLogin', true);
							this.$store.commit('setToken', res.data.userinfo.token);
							this.$store.commit('setUserInfo', res.data.userinfo);
							this.$store.commit('removeInviteCode'); // 删除缓存的邀请码

							// #ifdef H5
							window.location.href = 'https://app.yycjkb.cn/fujiajia.apk'
							// #endif

							// #ifdef APP-PLUS
							uni.navigateBack();
							// #endif

							uni.showModal({
								title: '您已注册成功，添加"付加加"公众号登录或下载APP登录'
							})

							// setTimeout(() => {
							// 	uni.redirectTo({
							// 		url: '/page/my/index'
							// 	})
							// }, 5000)

							// uni.navigateBack();
							// this.$store.dispatch('user/login', res);
							// uni.reLaunch({url: decodeURIComponent(this.pageroute)});
						}
					})


					// this.$api.post({
					// 	url: 'v1/wechat/config/register',
					// 	data: {
					// 		third_id: this.third_id,
					// 		avatarUrl: this.userInfo.avatarUrl,
					// 		nickName: this.userInfo.nickName,
					// 		gender: this.userInfo.gender,
					// 		password: this.password
					// 	},
					// 	success: res => {
					// 		// 绑定成功自动跳转登录接口
					// 		this.$api.post({
					// 			url: 'auth/login',
					// 			data: {
					// 				username: res.name,
					// 				password: this.password,
					// 				get_user_info: true,
					// 			},
					// 			success: res => {
					// 				this.$store.dispatch('user/login', res);
					// 				uni.reLaunch({url: decodeURIComponent(this.pageroute)});
					// 			}
					// 		});
					// 	}
					// });
				} else {
					return this.toast('请填写用户名')
					// this.$wanlshop.msg('请填写用户名');
				}
			},
			refuseUserInfo() {
				this.$wanlshop.back(1);
			},
			toChange(status) {
				// console.log(status)
				this.status = status;
			},
			forget() {
				uni.navigateTo({
					url: '/pages/my/forget'
				})
			}
		}
	};
</script>

<style scoped>


	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		/* Push content to the bottom */
		min-height: 100vh;
		background-image: url('/static/user/bg-reg.png');
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		/* Ensure the container takes up the full viewport height */
		padding: 20px;
		background-color: #d32f2f;
		text-align: center;
	}

	.form {
		background-color: rgba(255, 255, 255, 0.8);
		padding: 20px;
		border-radius: 10px;
		width: 90%;
		/* Adjust as needed */
		max-width: 600px;
		margin: 20px auto 0;
		/* Add top margin, center horizontally, no bottom margin */
	}



	.header {
		margin-bottom: 30px;
	}

	.subtitle {
		font-size: 16px;
		color: #ffe0e0;
		/* Light color */
	}

	.main-title {
		font-size: 24px;
		font-weight: bold;
		color: #fff;
	}

	.promo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}

	.coin-icon {
		width: 100px;
		height: 100px;
		/* background: url('/static/images/coin.png') no-repeat center center; */
		background-size: contain;
	}

	.promo-text text {
		color: #fff;
	}




	.input-group {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.icon {
		width: 25px;
		height: 20px;
		margin-right: 10px;
	}

	.input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 16px;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.agreement checkbox {
		/* width: 30px;
		height: 30px; */
		margin-right: 10px;
		background-color: #fff;
		/* border: 2px solid #d32f2f; */
		border-radius: 5px;
	}

	.agreement label {
		font-size: 33upx;
		color: #250f00;
	}


	.agreement .placeholder {
		color: #b3b3b3;
	}

	.submit-button {
		height: 50px;
		line-height: 50px;
		background-color: #d32f2f;
		/* Red background */
		color: #fff;
		/* White text */
		/* padding: 10px 0;              */
		/* Vertical padding */
		border: none;
		/* Remove default border */
		border-radius: 25px;
		/* Larger rounded corners */
		font-size: 18px;
		/* Font size */
		cursor: pointer;
		/* Pointer cursor on hover */
		width: 100%;
		/* Make the button take full width of its container */
		max-width: 350px;
		/* Optionally set a max-width */
		margin: 0 auto;
		/* Center the button */
	}

	.links {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	.forgot-password,
	.login-link {
		color: #d32f2f;
		cursor: pointer;
	}
</style>